<template>
  <epgis-nav-container title="忘记密码">
    <template #container>
      <div style= "height: 100%; width: 100%;background: white;" class="layoutVerticle">
        <van-field v-model="mobile" label="手机号码" type="textarea" rows="1" autosize="" placeholder="请输入手机号码">
        </van-field>
        <van-field v-model="wechat" label="微信号码" type="textarea" rows="1" autosize="" placeholder="请输入微信号码">
        </van-field>
        <van-field v-model="password" label="新密码" type="textarea" rows="1" autosize="" placeholder="请输入新密码">
        </van-field>
        <div class="levelLayout">
          新等级密码等级：
          <div :class="{
            levellow:levelClass =='low',
            levelmid:levelClass =='mid',
            levelhigh:levelClass =='high',
            levelhighest:levelClass =='highest'
            }">
          </div>
        </div>
        <div class="tip">
          温馨建议：密码长度8~16位，包含大写字母、小写字母、数字、特殊字符中至少3种类型格式。
        </div>

        <van-button @click="confirmSubmit" type="primary" style="margin-left: 16px; margin-right: 16px;margin-top: 50px;border-radius: 8px;height: 36px;" >
          确 认
        </van-button>
        
      </div>
    </template>
  </epgis-nav-container>
</template>

<script>
import { Http, Uploader } from "@/common/HttpClient";
import { MapUtil } from "@/common/mapUtil";
import { NativeUtil } from "@/common/utils";
import * as turf from "@turf/turf";
import { Toast, Notify } from "vant";
export default {
  components: {},
  data() {
    return {
      mobile:'',
      wechat:'',
      password:'',
      registMsg:{},
      passwordLevel: 0,
    };
  },

  mounted() {

  },
  destroyed() {
  },
  activated() {
  },
  computed: {
    levelClass() {
      const arr = ['low', 'low', 'mid', 'high', 'highest'];
      return arr[this.passwordLevel];
    },
  },
  watch: {
    'password': {
      handler(val) {
        let passwordLevel = 0;
        let newPassword  = this.password;
        let passwordLenght = newPassword.length;
        if (passwordLenght < 6) {
          passwordLevel = 1;
        } else {
          if (/[a-z]/.test(val)) {
            passwordLevel++; //lowercase
          }
          if (/[A-Z]/.test(val)) {
            passwordLevel++; //uppercase
          }
          if (/[0-9]/.test(val)) {
            passwordLevel++; //digital
          }
          let regSpecialSymbol = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/im;
          if (regSpecialSymbol.test(val)) {
            passwordLevel++; //specialcase
          }
        }
        this.passwordLevel = passwordLevel;
      },
    },
  },
  methods: {
    confirmSubmit() {
      if(this.checkValue()){
        this.submitForgetPassword();
      }
    },

    checkValue(){
      if (!this.mobile) {
        Notify({
            type: "danger",
            message: "请输入手机号码",
        });
        return false;
      }
      if (!this.wechat) {
        Notify({
            type: "danger",
            message: "请输入微信号码",
        });
        return false;
      }  
      if (!this.password) {
        Notify({
            type: "danger",
            message: "请输入新密码",
        });
        return false;
      } 
      return true;
    },

    submitForgetPassword(){
      let that = this;
      Http.instance()
        .postJSON({
          url: "/makeFriends/app/forgetPassword",
          params: {
            mobile: this.mobile,
            wechat: this.wechat,
            newPassword: this.password,
          },
        })
        .then((result) => {
          console.log("忘记密码：" + JSON.stringify(result));
          Notify({
            type: "success",
            message: "提交成功",
          });
          this.$router.go(-1);
        }).catch((result) =>{
          console.log("错误信息：" + result);
          Notify({
            type: "danger",
            message: "" + result,
          });
        });
    },









    




  },
};
</script>

<style lang="less" scoped>

  .layoutVerticle{
    display: flex;
    flex-direction: column;
  }

  .layoutHorizontal{
    display: flex;
    flex-direction: row;
  }

  .layoutCenter{
    justify-content: center;
    align-items: center;
  }


  /deep/.van-field__control {
    text-align: right;
  }


  .levelLayout {
    display: flex;
    justify-content: flex-end;
    padding: 12px 0;
    font-size: 14px;
    color: #333;
    padding: 10px 16px;
  }
  .levellow {
    width: 200px;
    border-radius: 25px;
    overflow: hidden;
    height: 18px;
    background-color: #e3e3e3;
    // @each $class, $width, $bgc, $text in (low, 25%, #e71b25, 低),(mid, 50%, #ffa840, 中), (high, 75%, #44ba00, 高), (highest, 100%, #44ba00, 很高)
    // {
    //   &.#{$class} {
    //     &::before {
    //       content: '#{$text}';
    //       background-color: $bgc;
    //       display: flex;
    //       align-items: center;
    //       height: 100%;
    //       width: $width;
    //       justify-content: center;
    //       color: #fff;
    //       font-size: 12px;
    //     }
    //   }
    // }
      &::before {
          content: '低';
          background-color: #e71b25;
          display: flex;
          align-items: center;
          height: 100%;
          width: 25%;
          justify-content: center;
          color: #fff;
          font-size: 12px;
        }
  }

  .levelmid {
    width: 200px;
    border-radius: 25px;
    overflow: hidden;
    height: 18px;
    background-color: #e3e3e3;
    &::before {
        content: '中';
        background-color: #ffa840;
        display: flex;
        align-items: center;
        height: 100%;
        width: 50%;
        justify-content: center;
        color: #fff;
        font-size: 12px;
    }
  }

  .levelhigh {
    width: 200px;
    border-radius: 25px;
    overflow: hidden;
    height: 18px;
    background-color: #e3e3e3;
    &::before {
        content: '高';
        background-color: #44ba00;
        display: flex;
        align-items: center;
        height: 100%;
        width: 75%;
        justify-content: center;
        color: #fff;
        font-size: 12px;
    }
  }

  .levelhighest {
    width: 200px;
    border-radius: 25px;
    overflow: hidden;
    height: 18px;
    background-color: #e3e3e3;
    &::before {
        content: '很高';
        background-color: #44ba00;
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
        justify-content: center;
        color: #fff;
        font-size: 12px;
    }
  }

  .tip {
    padding: 10px 0;
    font-size: 14px;
    color: #333;
    padding: 10px 16px;
  }




</style>